/*
 * @Description:
 * @Author: LCL
 * @Date: 2021-11-12
 * @LastEditors: LCL
 * @LastEditTime: 2021-11-30
 * @FilePath: /beff/src/components/ComponentConfig/DatePicker.tsx
 */

import { Form, Input, Switch, Select, DatePicker } from 'antd';
// import moment from 'moment';
import type { Moment } from 'moment';
import { useState, useEffect } from 'react';

import {
  titleRender,
  isInline,
  fieldRender,
  checkRender,
  descRender,
  tipRender,
  fieldPermissionsRender,
  spanWidthRender,
} from '@/components/ComponentConfig/commonItem';
import { subFormCompSpanWidthRender }from './spanWidth';

type PropsType = {
  config: any;
  onChangeCallback: Function;
};

const DatePickerConfig = (props: PropsType) => {
  const { config } = props;

  const [form] = Form.useForm();
  const [showDefault, setShowDefault] = useState(false);

  useEffect(() => {
    form.setFieldsValue({ ...config });
  }, [config]);

  // console.log('render')

  const onValuesChange = (changeValue: any, allValue: any) => {
    // console.log(changeValue,allValue)
    for (let k in changeValue) {
      config.props[k] = allValue[k];
    }
    console.log(config);
    props.onChangeCallback(config);

    if (Object.keys(changeValue)[0] === 'swDefaultValue') {
      setShowDefault(!showDefault);
    }
    if (Object.keys(changeValue)[0] === 'minDate') {
      const disabledDate = (currentDate: Moment) => {
        const { minDate } = changeValue;
        return currentDate > minDate.subtract(1, 'days');
      };
    }
    if (Object.keys(changeValue)[0] === 'maxDate') {
      const disabledDate = (currentDate: Moment) => {
        const { maxDate } = changeValue;
        return currentDate < maxDate.add(1, 'days');
      };
    }
  };

  return (
    <div>
      {titleRender(config, props, 'title')}
      {fieldRender(config, props, 'field')}

      {tipRender(config, props, 'tip')}

      <Form form={form} onValuesChange={onValuesChange} layout="vertical" initialValues={config.props}>
        <Form.Item label="展示默认值" name="swDefaultValue" valuePropName="checked">
          <Switch />
        </Form.Item>
        {showDefault && (
          <Form.Item label="默认值" name="defaultValue">
            <DatePicker />
          </Form.Item>
        )}
        <Form.Item label="类型" name="picker">
          <Select>
            <Select.Option value="default">默认</Select.Option>
            <Select.Option value="year">年</Select.Option>
            <Select.Option value="month">月</Select.Option>
            <Select.Option value="week">周</Select.Option>
          </Select>
        </Form.Item>
        <Form.Item label="启用清除按钮" name="allowClear" valuePropName="checked">
          <Switch />
        </Form.Item>
        <Form.Item label="启用时间选择" name="showTime" valuePropName="checked">
          <Switch />
        </Form.Item>
        <Form.Item label="启用‘今天’按钮" name="showToday" valuePropName="checked">
          <Switch defaultChecked={true} />
        </Form.Item>
      </Form>

      {fieldPermissionsRender(config, props, 'fieldPermissions')}
      {checkRender(config, props, 'check')}
      { subFormCompSpanWidthRender(config,props) }
     
    </div>
  );
};

export default DatePickerConfig;
